<template>
  <div class="drawlots-detail" v-if="!lotsLoading">
    <nav-back />
    <h1 class="main-title">{{lots.title}}</h1>
    <p class="article">{{lots.article}}</p>

    <div class="interpretations">
      <div
        v-for="(v,i) in lots.interpretation"
        :key="i"
        class="interpretation-item"
      >
        <h2 class="title">{{v.title}}</h2>
        <p class="text">{{v.text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { NavBack } from '@/components'

const { mapState, mapActions } = createNamespacedHelpers('Home')

export default {
  name: 'drawlots-detail',
  components: { NavBack },
  computed: { ...mapState(['lots', 'lotsLoading']) },
  methods: { ...mapActions(['getLots']) },
  mounted() {
    this.getLots()
  }
}
</script>

<style lang="stylus">
.drawlots-detail {
  min-height: 100vh;
  line-height: 1.5;
  background-color: #fff;

  .main-title {
    font-size: 120%;
    text-align: center;
    margin-bottom: 20px;
  }

  .article {
    margin: 0 16px;
  }

  .interpretations {
    padding: 16px;
  }

  .interpretation-item {
    margin: 20px 0;

    .title {
      margin: 10px 0;
      font-weight: bold;
    }
  }
}
</style>
